/* * @Author: danyang * @Date: 2017-08-31 15:34:06 * @Last Modified by: ice *
@Last Modified time: 2019-10-28 14:23:32 */

<template>
    <div class="for-main with-btn">
        <div class="btn-vip" @click="$emit('govip')" />
        <div class="for-body">
            <div class="title">
                忘记密码
            </div>
            <div class="form">
                <el-form ref="ruleForm" :model="ruleForm" :rules="rules">
                    <el-form-item prop="mobile" class="login-input">
                        <el-input
                            v-model="ruleForm.mobile"
                            type="phone"
                            auto-complete="off"
                            class="el-input-forget"
                            placeholder="手机号"
                        />
                    </el-form-item>
                    <el-form-item
                        prop="verify"
                        class="login-input reg-verify-code"
                    >
                        <el-input
                            v-model="ruleForm.verify"
                            type="text"
                            auto-complete="off"
                            placeholder="验证码"
                            class="el-input-forget"
                        />
                        <a
                            :class="{
                                'code-link': true,
                                'code-disabled': codeDisabled
                            }"
                            href="javascript:;"
                            @click="getVerifyCode"
                            >{{ verifyCodeStr }}</a
                        >
                    </el-form-item>
                    <el-form-item prop="password" class="login-input">
                        <el-input
                            v-model="ruleForm.password"
                            type="password"
                            auto-complete="off"
                            class="el-input-forget"
                            placeholder="登录密码，6-18位字母、数字、下划线"
                        />
                    </el-form-item>
                    <el-form-item prop="rpassword" class="login-input">
                        <el-input
                            v-model="ruleForm.rpassword"
                            type="password"
                            auto-complete="off"
                            placeholder="重复密码"
                            class="el-input-forget"
                        />
                    </el-form-item>
                </el-form>
                <div class="btn-wrap">
                    <button class="reg-btn" @click="fnReset">
                        确定
                    </button>
                </div>
            </div>
        </div>
        <div class="back-login">
            <a
                href="javascript:void(0);"
                class="back-login-link"
                @click="forToLogin"
                >&lt;&nbsp;返回登录</a
            >
        </div>
    </div>
</template>

<script>
export default {
    components: {},
    props: {},
    data() {
        const checkPassword = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请再次输入密码'))
            } else if (value !== this.ruleForm.password) {
                callback(new Error('两次输入密码不一致!'))
            } else {
                callback()
            }
        }

        return {
            autoLogin: false,
            inviteCode: '',
            verifyCodeStr: '获取验证码',
            codeDisabled: false,
            ruleForm: {
                mobile: '',
                code: '',
                password: '',
                rpassword: ''
            },
            rules: {
                mobile: [
                    { required: true, message: '请输入手机号', trigger: 'blur' }
                ],
                verify: [
                    { required: true, message: '请输入验证码', trigger: 'blur' }
                ],
                password: [
                    { required: true, message: '请输入密码', trigger: 'blur' }
                ],
                rpassword: [
                    {
                        required: true,
                        message: '请再次输入密码',
                        trigger: 'blur'
                    },
                    { validator: checkPassword, trigger: 'blur' }
                ]
            }
        }
    },
    methods: {
        clear(attr) {
            this[attr] = ''
        },
        forToLogin() {
            this.$emit('changePage', 'login')
        },
        getVerifyCode() {
            if (this.codeDisabled) {
                return
            }
            const that = this
            let verifyCodeTimer = null

            function fnTimer(num) {
                let number = num

                if (verifyCodeTimer != null) {
                    clearInterval(verifyCodeTimer)
                }
                that.verifyCodeStr = number + 's后重新获取'
                verifyCodeTimer = setInterval(function() {
                    number--
                    if (!number || number <= 0) {
                        that.codeDisabled = false
                        clearInterval(verifyCodeTimer)
                        that.verifyCodeStr = '获取验证码'
                    } else {
                        that.verifyCodeStr = number + 's后重新获取'
                    }
                }, 1000)
            }
            this.$post('/User/sendVerify', {
                type: 2,
                mobile: that.ruleForm.mobile
            }).then(function(resp) {
                that.codeDisabled = true
                if (resp.code == 1) {
                    fnTimer(60)
                    that.$notify.success({
                        title: '成功',
                        duration: 2000,
                        message: '请查收验证码'
                    })
                } else if (resp.code == 0) {
                    that.$notify.error({
                        title: '错误',
                        duration: 2000,
                        message: resp.msg
                    })
                    that.codeDisabled = false
                }
            })
        },
        fnSuccess() {
            // 登录能有登录和绑定进入,由qrcode区分
            if (this.$route.query.login_code) {
                // location.reload();
                this.$emit('success')
            } else {
                this.$emit('changePage', 'login')
            }
        },
        fnReset() {
            const that = this

            this.$post('/User/forgetPassword', that.ruleForm).then(function(
                resp
            ) {
                if (resp.code == 1) {
                    that.$notify.success({
                        title: '成功',
                        duration: 2000,
                        message: '修改成功，请登录'
                    })
                    that.fnSuccess()
                } else {
                    that.$notify.error({
                        title: '错误',
                        duration: 2000,
                        message: resp.msg
                    })
                }
            })
        }
    }
}
</script>
<style lang="less">
.for-main {
    .reg-verify-code {
        .el-input {
            width: 230px !important;
        }
        .el-input__inner {
            width: 230px !important;
        }
        .code-link {
            width: 105px;
            color: #fff;
            text-decoration: none;
            display: inline-block;
            line-height: 20px;
            margin-left: 10px;
            border-bottom: 1px solid #e8e8e8;
            transform: translateY(5px);
        }
        .code-disabled {
            color: rgba(255, 255, 255, 0.7);
            border-bottom: 1px solid rgba(255, 255, 255, 0.7);
            cursor: default;
        }
    }

    .login-input {
        margin: auto;
        margin-bottom: 20px;
        input,
        input:focus {
            outline: none;
            background-color: transparent;
            border: 0;
            border-radius: 0;
            border-bottom: 1px solid rgba(255, 255, 255, 0.5);
            line-height: 30px;
            font-size: 14px;
            color: #fff;
            width: 350px;
            padding-right: 18px;
            padding-left: 5px;
        }
        input:focus {
            border-bottom: 1px solid #fff;
        }
        input::-webkit-input-placeholder {
            color: rgba(255, 255, 255, 0.5);
        }
        input::-moz-placeholder {
            color: rgba(255, 255, 255, 0.5);
        }
        input:-moz-placeholder {
            color: rgba(255, 255, 255, 0.5);
        }
    }
}
</style>
<style lang="less" scoped>
.for-main {
    position: realtive;
    width: 450px;
    height: 528px;
    background-position: center right;
    background-size: 900px 628px;
    background-repeat: no-repeat;
    background-image: url(//cdn.zsdx.cn/wei/images/hire/login/bg-vip4.png?v=1.1);

    .for-body {
        position: absolute;
        right: auto;
        left: 50px;
        top: 0px;
        bottom: 0px;
        text-align: center;
        width: 355px;
        .title {
            width: 100%;
            color: #fff;
            font-size: 16px;
            margin-top: 40px;
            margin-bottom: 100px;
            text-align: center;
        }
        .btn-wrap {
            width: 100%;
            .reg-btn {
                display: block;
                width: 350px;
                background: #fff;
                border-radius: 4px;
                border: 0;
                color: #1f2d3d;
                line-height: 40px;
                margin: auto;
                margin-top: 20px;
                font-size: 14px;
                text-decoration: none;
            }
        }
        .login-input {
            margin-bottom: 20px;
        }
        .for-verify-code {
            input {
                width: 230px;
            }
            .code-link {
                width: 105px;
                color: #fff;
                text-decoration: none;
                display: inline-block;
                line-height: 20px;
                margin-left: 10px;
                border-bottom: 1px solid #e8e8e8;
                transform: translateY(5px);
            }
            .code-disabled {
                color: rgba(255, 255, 255, 0.7);
                border-bottom: 1px solid rgba(255, 255, 255, 0.7);
                cursor: default;
            }
        }
    }
    .back-login {
        position: absolute;
        top: 20px;
        left: 20px;
        .back-login-link {
            text-decoration: none;
            font-size: 13px;
            color: #1f2d3d;
            font-weight: bold;
            &:hover {
                color: #00bbee;
            }
        }
    }
}
</style>
<style lang="less">
.with-btn .for-body .form {
    margin: auto;
    margin-bottom: 40px;
    input,
    input:focus {
        outline: none;
        background-color: transparent;
        border: 0;
        border-radius: 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.5);
        line-height: 30px;
        font-size: 14px;
        color: #fff;
        width: 350px;
        padding-right: 18px;
        padding-left: 5px;
    }
    .el-input-forget {
        input:focus {
            border-bottom: 1px solid #fff;
        }
        input::-webkit-input-placeholder {
            color: #ffffff !important;
            opacity: 0.8;
        }
        input::-moz-placeholder {
            color: #ffffff !important;
            opacity: 0.8;
        }
        input:-moz-placeholder {
            color: #ffffff !important;
            opacity: 0.8;
        }
    }
}
</style>
